﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Web学习笔记</title>
	<script src="./jquery-3.2.0.min.js"></script>
	<style type="text/css">
		*{margin:0; padding:0;}
		ul,li{list-style:none;}
		#header{background-color:#000; width:100%; overflow:hidden;}
		.nav li a{
			text-decoration:none;
			display:block;
			width:80px;
			height:50px;
			color:#fff;
			float:left;
			line-height:50px;
			text-align:center;
			font-size:20px;
		}
		.subnav{background-color:rgba(0,0,0,0.65); width:100%; margin-top:50px; display:none; position:absolute;}
		.subnav ul{margin-left:20px; margin-bottom:50px;}
		.subnav a{text-decoration:none; color:#fff; font-size:15px;}
		.content{float:left;}
		.webside{float:left;}
		
		.nav a:hover{
			background-color:#e4e4e4;
		}
		
		.subnav a:hover{
			color:#A39C9C;
		}
		
		#header:hover .subnav{
		display:block;
		}
		
		#mainbody{
			background-color:blue; 
			width:80%; height:500px; 
			margin:20px auto;
		}
		.stucss{background-color:yellow; width:100%;}
		.stucss table{border-collapse:collapse;font-size:20px;}
		.stucss th,td{border:1px solid #000;}
	</style>
</head>
<body>
	<!--导航栏-->
	<div id="header">
		<ul class="nav">
			<li><a href="#">内容</a></li>
			<li><a href="#">常用网址</a></li>
			<li><a href="#">关于</a></li>
		</ul>
		<div class="subnav">
			<ul class="content">
				<li><a href="#">CSS</a></li>
				<li><a href="#">JavaScript</a></li>
			</ul>
			<ul class="webside">
				<li><a href="https://www.baidu.com" target="_blank">百度一下</a></li>
				<li><a href="http://fanyi.baidu.com" target="_blank">百度翻译</a></li>
				<li><a href="http://cn.bing.com" target="_blank">Bing</a></li>
			</ul>
		</div>
	</div>

	<div id="mainbody">
		主体内容
		<div class="stucss">
        		<h1>margin</h1>
                <table>
                		<tr>
                        	<th>属性</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                        	<td>margin</td>
                            <td>简写属性。在一个声明中设置所有外边距属性。</td>
                        </tr> 
                         <tr>
                        	<td>margin-bottom</td>
                            <td>设置元素的下外边距。</td>
                        </tr> 
                         <tr>
                        	<td>margin-left</td>
                            <td>设置元素的左外边距。</td>
                        </tr> 
                         <tr>
                        	<td>margin-right</td>
                            <td>设置元素的右外边距。</td>
                        </tr> 
                         <tr>
                        	<td>margin-top</td>
                            <td>设置元素的上外边距。</td>
                        </tr> 
                </table>
                <script>
					$("table").css("width","100%");
					$("td").css("text-align","center");
					$("tr").css("height","50px");
                	$("tr:even").css("background-color","#E1D9DA");
					$("tr:odd").css("background-color","#FFFFFF");
                </script>
		</div>
	</div>
</body>
</html>
